<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>
<body>
<div id="box" style="width: 400px;height: 400px;"></div>
</body>
<script>
  var box2_1_2=echarts.init(document.getElementById("box"));
  option = {
    title: {
      text: "2018年-2022年货物进出口总额",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20,
      },
      top: "5%",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    grid: {
      top: "15%",
      left: "10%",
      right: "10%",
      bottom: "15%",
      // containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
        },
        splitArea: {
          // show: true,
          color: "#f00",
          lineStyle: {
            color: "#f00",
          },
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
        boundaryGap: false,
        data: ["A", "B", "C", "D", "E"],
      },
    ],

    yAxis: [
      {
        type: "value",
        min: 0,
        max: 10000000,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.1)",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          margin: 20,
          textStyle: {
            color: "#d1e6eb",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "注册总量",
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 25,
        lineStyle: {
          normal: {
            color: "#6c50f3",
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#6c50f3",
          },
        },
        itemStyle: {
          color: "#6c50f3",
          borderColor: "#fff",
          borderWidth: 3,
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(108,80,243,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(108,80,243,0)",
                      },
                    ],
                    false
            ),
            shadowColor: "rgba(108,80,243, 0.9)",
            shadowBlur: 20,
          },
        },
        data: [237411.5,214255.2,179278.8,172373.6,164128.8],
      },
      {
        name: "注册总量",
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 25,
        lineStyle: {
          normal: {
            color: "#00ca95",
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#00ca95",
          },
        },

        itemStyle: {
          color: "#00ca95",
          borderColor: "#fff",
          borderWidth: 3,
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0,202,149,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0,202,149,0)",
                      },
                    ],
                    false
            ),
            shadowColor: "rgba(0,202,149, 0.9)",
            shadowBlur: 20,
          },
        },
        data: [6270110,5995790,4655910,4577890,4622440],
      },
    ],
  };
  box2_1_2.setOption(option);

</script>
</html>